Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

Simple AngularJs Application Using Asp.Net MVC

In this blog,we will learn to create a simple angularjs application using Dotnet Framework.So Let's start to implement it step by step.   1.Open Visual Studio and Create a New MVC project.   2.Now create a MVC5 Empty...

multiple angular app in one page

While working in jsp with some parts common in few pages and ran into a problem to attach multiple apps to a single jsp page. After doing lot of search I found this one the best solution. Create a new app and take all other apps as an parameter. ...

jquery autocomplete in AngularJs not working on first click

Hi, I was using jquery autocomplete functionality in angularJs using directive. Whenever I tried to load static data it was working fine, but when I loaded data from server side the first click was not working.  I was using code someth...

Understanding directives in AngularJS

Directives are an important feature of AngularJS which are used to extend HTML and create reusable and testable code. The framework provides a set of rich built in directives and we can also build  custom ones if required. In this tutorial w...

Understanding AngularJS Bootstrap Process

Bootstrap process in angularJs is simple and you should know about it. There are two ways of bootstrap process in angularJs: Automatic Bootstrap Manual Bootstrap Automatic Bootstrap: When we run our angularJs App the DOM(Document Ob...

Understanding Data Binding in AngularJS

In this post, you will learn about the data binding in angularJs. It is one of the powerful feature which angularJs provides. There is two-way data binding in angularJs to bind data between model and view. The data binding mechanism is handle...

Understanding scopes in AngularJS

An  AngularJS application uses an object called $scope which is shared between controller and view.  This object holds the Model data that is passed to the View and acts as a glue between Controller and View. In this blog we will dive d...

Form Validation with AngularJS and ASP.NET MVC

In this blog, we will learn about form validation in AngularJS. From Angular 1.3 onwards, ngMessages module has been introduced and we will be using the same for form validation. Before the addition of this module, developers had to make use dire...

Using AngularJS and ASP.NET MVC to create a Hello World Application

In this article we will learn to create a simple Hello World application using AngularJS framework and ASP.NET MVC.   AngularJS : Introduction AngularJS is JavaScript framework used for creating single page web applications and is m...

Form Validation in AngularJS with ngMessages

In this post, you will learn about ngMessages directive in angularJs and how it can help to show error messages in your application. ngMessages provides custom form validation facility to display error messages in angularJs. Let’s start ...

Understanding $emit, $broadcast in AngularJS with example

The services yield by Anjularjs which can be utilized for communication based on event between controllers are $on, $emit, and $broadcast. These are under the publish/subscribe design pattern of angularjs i.e. you can publish an event somewhere a...

Integrate Postgresql with Node JS

Many Programmers feel comfortable to use Postgre SQL rather than MongoDB, member of MEAN Stack. We are going to integrate Postgresql with NodeJS To install NodeJS, please go through this Article Now, when we are finished with Installatio...

Angular BlockUI - An Overview

What you will learn from this blog: 1. What is Angular BlockUI 2. How to use it in view and js 3. Learn how it will remove unnecessary hide and show of loader during each ajax request 4. how it will reduce line of code If you are looking...

$this vs $scope in AngularJs

$scope and $this are the mostly used in AngularJs. But we often caught up in a perplexed situation, which one we should use. whatever we define in a certain block(or DIV) of HTML, all the variables comes under the $scope or this. for exa...

AngularJs Filter

When we want to format data in angularJS then we use filter.There are n number of filter available in angularJS which is used to transform data. AngularJS filter are: 1) Currency: Which will format a number to a currency format. 2) date:Whi...

Searching and Pagination in AngularJs.

Hi All, This blog is about pagination and searching in angularjs. In web applications, we have large amount of data to display and generally we use tables and lists.Searching and pagination makes it easy and user friendly. First lets sta...

Angularjs Scope

In AngularJS, Scope is a javascript object by which we can join our controller with the views. In scope we will contain model data which we can access by using $scope object. The use of $scope is easily explained by the simple example. Example...

Manual and Automatic bootstrapping in AngularJS

In Javascript framework like AngularJS there is a bootstrapping process involved and there are certain flow that is involved in it. There are two types bootstrapping involved in AngularJS: Automatic bootstrapping Manual Bootstrapping ...

Chapter 4:Angularjs Services

In previous blog we have take knowledge about how we will use angularjs and how important role directives play while using angularjs.If you have not read previous blog then kindly request first read that blog then carry forward to read this ...

Chapter 3: Angular.js with UI Logic(Controller)

In the previous chapter we have discuss what is angularjs and what are the directives before proceeding to next chapter where we will practically try to implement all this it is necessary to know about angular.js definition and directives. As ...

How to make a simple timer in angularjs

Hi all, We are going to implement count-up timer. In Count up timer, timer starts from 00:00:00 to time you defined. It is used to show duration for example video duration , call duration , etc In Html file , Just add binding variable in yo...

Initialize AngularJS Model with MVC Model

Hi All, When we need to use AngularJS to bind controls with AngularJS Model but we have MVC Model filled through MVC Controller, we can follow below steps to do the same without using "ng-init". Step 1: Create two js files in Scri...

Bind Dropdown using AngularJS

Hi All, This log will help you to bind data to dropdown/html select control using AngularJS. Data is populated using webmethod. <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry"> </se...

Stop Event Propagation on click in AngularJS

Sometimes you have a click event on parent div as well as child elements of it. If you click on the child element, it automatically calls the parent click function along with its own function. This is called event bubbling. To restrict or stop th...

Get HTML element using class name or Id in AngularJS

Hi All, In this blog we will see how easy is to get HTML element in AngularJS. We many a times stuck in situation where we need to get HTML element that are not bind to AngularJS Model. Here is quick and easiest way of doing that. Using Cla...

Use of ng-cloak in AngularJS

Hi All, When we use AngularJS in any of our page, while rendering it on browser we happen to see flicker in HTML with uncompiled raw html. And once the AngularJS is compiled then it will show the compilled output. To avoid this flickering we c...

Add HTML Content To div Using AngularJS

Hi All, Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you ...

Sharing Data Between Controllers in AngularJS

Hi All, To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object: A simple example in which two controllers are sharing name of a user. TEST.html...

How to bind application data to attributes of HTML DOM elements?

The following directives are used to bind application data to attributes of HTML DOM elements: 1.ng-disabled Directive:-    This directive is used to disable any attribute (button,checkbox,etc).     Add ng-disabled...

Changing button text (toggle text) on click in AngularJS

We can make a button behave like a toggling button by making a directive in AngularJS. It is very simple. You just need to bind the attribute and then check the condition. First create a simple HTML :- <html> <head> ...

Redirect to a new page/url in AngularJS

We use $location service or $window to redirect to a new URL. $location exposes the URL to the browsers address bar and makes it available to the application. It reflects the changes either side ,i.e. synchronizes the changes and maintains it bet...

AngularJS - $interpolate, $compile and $parse

There are three useful services provided by AngularJS for view rendering and evaluating expression which it uses internally. $interpolate :- This service simply takes a string and is used to evaluate expressions. We can run the entire string...

Angular $q,promises and deferred.

Promises are logics that are executed after any function is completed.  In AngularJS, promises are provided by the in-built $q service. It executes asynchronous functions by registering them with the promise object.   Deferred helps ...

What is $rootScope and how is it related with $scope?

$rootscope is the parent of all scopes. Values exposed there will be used in all controllers and templates. It acts as a parent object of all “$scope” angular objects created in a web page. Now, let us understand how the “$ro...

How to populate options in select in angularjs with example

The dynamically generated option in the select box with angularjs is done with the following code : We can populate the options inside the select box and on selecting any value from the select box it reflect to some event. It will sh...

AngularJS http (ajax)

AngularJS has provided a $http service that works as an ajax call in jquery. It performs a function of reading data from the server. $http makes a call to the database and retrieves the desired data or records. How to use? 1. you need to in...

What problems does AngularJS solves?

AngularJS is a framework ( client-side ) for web applications that embeds HTML, CSS and Javascript. It basically focuses on:- 1.Coding data access, Reading, form validations - are some functions in which many people are not good at while doing...

$watch() , $digest() and $apply() in AngularJS

There is an important concept of angularjs $scope function like: $watch $digest  $apply  As to understand angularjs more better we have to go throught the central function in angularjs. Lets discuss them one by one: ...

Different ways of using array filters in AngularJS

AngularJS provides a filter feature to format input value and an array based on certain criteria. Here, we will see the ways of array filtering. For example-below is the array:- $scope.movies = [ {id: 1,title: Airlift, genre: real ...

AngularJS $apply

AngularJS $apply comes into play when it invokes digest cycle to watch the scope model changes. Angular wraps the function call within the $scope.$apply. It means it executes a complete new life cycle. If the execution of the function is normal, ...

AngularJS $digest

Since AngularJS has a popular concept of two way data binding. But how does it comes to know that a value has changed? Here comes the role of $digest.    AngularJS executes in cycles which is called as $digest cycle. Suppose we ch...

Understanding Angular $watch

AngularJS has a concept of powerful data binding. It accomplishes this by keeping a watch on its scope variables. When we change the the variable on $scope object, the $scope object gets automatically changed and vice-versa. Most of the time angu...

AngularJS $timeout and $interval

$timeout and $interval are two AngularJS timer services. We use these services to call functions and these are similar to javascript’s setTimeout and setInterval functions. $timeout- This is used to call a function and schedules a single c...

Iterate json data in angularJS

While working for an autocomplete funtionality in angularJS encountered a problem where instead of the JSON we need to iterate each element and have to make an Array of string. For iterating the JSON data(from server side), we used: $scop...

AngularJS expressions

Expressions in AngularJS is represented using double curly braces-{{ }}. Expressions are used to bind  the data to the HTML in the same way as the ng-bind directive of angular. Expressions using- 1.numbers:- syntax- <p>Price...

Understanding Angular UI-Router

In Angular we are provided with a routing framework named Angular UI-Router. It enables us to make transitions based on states rather than routes URL (which is used in ngRoute),i.e. it is organized around states. It supports nested states and mul...

MVC architecture in angular

Model View Controller is abbreviated as MVC. MVC is the popular web design architecture because it separates the business logic from its view or presentation. It has three components:- Model- an object carrying data. View- visualization ...

Single Page Applications using Angular

Single page applications are the applications that separates the model and the view layer i.e, model layer handles the data and view layer reads from the models. SPA’s are becoming popular because it retrieves all the code(JS,HTML,CSS) on ...

AngularJS Dependency Injection in detail

Dependency Injection allows the removal of hard-coded dependencies and makes it possible to change them. It helps in making components testable,reusable and maintainable. We are provided with in built dependency injection mechanism by AngularJs....

Promises in Angularjs

Promises - AngularJS's promise provides a built-in service $q. It provide a way to execute asynchronous call in series by registering it with a promise object. Let us now elaborate promise and deferred. Deferred - It represent the ...
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: